<template>
    <el-sub-menu v-if="menus.children.length" :index="menus.cat_id">
      <template #title>
        <el-icon v-if="menus.icon">
            <component :is="menus.icon"/>
        </el-icon>
        <span style="margin-left: 10px;">{{ menus.title }}</span>
      </template>
      <label v-if="menus.children.length >= 1">
        <!-- /* 递归调用自己 */ -->
        <layout-menus v-for="i in menus.children" :key="i.cat_id" :menus="i" />
      </label>
    </el-sub-menu>
    <el-menu-item v-else :index="menus.cat_id" @click="clickMenu(menus)">
      <el-icon v-if="menus.icon">
            <component :is="menus.icon" />
        </el-icon>
      <template #title>{{ menus.title }}</template>
    </el-menu-item>
  </template>

<script >
/**
 * 递归 菜单
 * 
 */
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'LayoutMenus',
  props: {
    menus: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  setup () {
    const router = useRouter()
    const clickMenu = (menu) => {
      router.push({
        path: menu.path,
        name: menu.title
      })
    }
    return { clickMenu }
  }
})
</script>
<style scoped>

.el-menu .el-icon{
    font-size:18px;

}
.el-menu .el-icon svg{
    width:16px;
    height:16px;
}
</style>